<template>
  <ul class="topNav">
    <li><router-link to="/recommend">推荐音乐</router-link></li>
    <li><router-link to="/hot">热歌榜</router-link></li>
    <li><router-link to="/singger">歌手</router-link></li>
    <li><router-link to="/search">搜索</router-link></li>
  </ul>
</template>
<script>
export default {
  
}
</script>
<style lang='less' scoped>
.topNav{
  background-color: #fff;
  display: flex;
  width: 100%;
  top: 84px;
  position: fixed;
  z-index: 10;
  border-bottom: 1px solid #F4F4F4;
  li{
    flex: 1;
    line-height: 40px;
    text-align: center;
    a{
      display: inline-block;
      line-height: 40px;
      padding: 0px 5px;
      font-size: 15px;
      color: #333;
      &.router-link-exact-active{
        color: #EE6A22;
        position: relative;
        &::after{
          display: block;
          content: "";
          position: absolute;
          width: 100%;
          // height: 2px;
          bottom: -2px;
          left: 0px;
          height: 4px;
          /* -webkit-transform: scaleY(.5); */
          transform: scaleY(.5);
          background: #EE6A22;
        }
      }
    }
  }
}
</style>